<template>
  <div class="about">
    <div>
      <p><span>{{ location.name }}</span>实时天气</p>
      <p>数据观测时间：{{ timeFormat }}</p>
    </div>
    <div>
      <p><i :class="iconName"></i></p>
      <p>温度：{{ now.temp }}</p>
      <p>体感温度：{{ now.feelsLike }}</p>
    </div>
    <div class="btns">
      <a-button type="primary" @click="putWeather">天气指数</a-button>
      <a-button type="primary" @click="putAir">空气质量</a-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { KEY, API_NOW } from '@/common/constants.js'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
// 引入qweather-icons和风天气图标样式
import "qweather-icons/font/qweather-icons.css"

export default {
  data() {
    return {
      now: {}
    }
  },
  computed: {
    ...mapState([
      "location"
    ]),
    timeFormat: function () {
      return dayjs(this.now.obsTime).format('YYYY年MM月DD日 HH时mm分')
    },
    iconName: function () {
      return "qi-" + this.now.icon
    }
  },
  methods: {
    getData() {
      axios.get(API_NOW, {
        params: {
          key: KEY,
          location: this.location.id
        }
      }).then(res => {
        console.log(res.data)
        this.now = res.data.now
      })
    },
    putWeather() {
      this.$router.push('/weather')
    },
    putAir() {
      this.$router.push('/air')
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    location: function () {
      // 监听到当location改变时，重新获取数据
      this.getData()
    }
  }
}
</script>

<style scoped>
i {
  color: red;
  font-size: 3rem;
}
.btns {
  width: 200px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
</style>
